<template>
    <div class="videoOn">
        <div class="flexRow">
            <div class="rowLabel">投放位置：</div>
            <div>
                <el-input v-model="position"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="change_position" size="small">鼠标拾取</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">相机位置：</div>
            <div>
                <el-input v-model="cameraPosition"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="change_cameraPosition" size="small">鼠标拾取</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向上偏移：</div>
            <div>
                <el-button type="primary" @click="translationTop" size="small">+</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向下偏移：</div>
            <div>
                <el-button type="primary" @click="translationBottom" size="small">+</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向左偏移：</div>
            <div>
                <el-button type="primary" @click="translationLEFT" size="small">+</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向右偏移：</div>
            <div>
                <el-button type="primary" @click="translationRIGHT" size="small">+</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向前偏移：</div>
            <div>
                <el-button type="primary" @click="translationALONG" size="small">+</el-button>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">向后偏移：</div>
            <div>
                <el-button type="primary" @click="translationINVERSE" size="small">+</el-button>
            </div>
        </div>

        <div class="flexRow">
            <div class="rowLabel">水平拉伸：</div>
            <div>
                <el-input-number size="small" v-model="fov"
                                 @change="change_fov"></el-input-number>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">宽高比例：</div>
            <div>
                <el-input-number size="small" v-model="aspect"
                                 @change="change_aspect"></el-input-number>
            </div>
        </div>
        <div class="flexRow">
            <div class="rowLabel">混合系数：</div>
            <div>
                <el-input-number
                        size="small"
                        v-model="alpha"
                        @change="change_alpha"
                ></el-input-number>
            </div>
        </div>
        <div class="flexRow">
            <el-button-group>
                <el-button type="primary" @click="chkDebugFrustum" size="small"
                >框线
                </el-button
                >
                <el-button type="primary" @click="locate" size="small"
                >相机
                </el-button
                >
                <el-button type="primary" @click="videoPlay" size="small"
                >播放
                </el-button
                >
                <el-button type="primary" @click="videoStop" size="small"
                >暂停
                </el-button
                >
            </el-button-group>
        </div>

        <div class="flexRow">
            <el-button-group>
                <el-button type="primary" @click="createViewForVideo" size="small"
                >视频投放
                </el-button
                >
                <el-button type="primary" @click="createViewForPicture" size="small"
                >图片投放
                </el-button
                >
                <el-button type="primary" @click="createText" size="small"
                >文本投放
                </el-button
                >
                <el-button type="primary" @click="createViewForColor" size="small"
                >颜色投放
                </el-button
                >
                <el-button type="primary" @click="clearVideo" size="small"
                >清空
                </el-button
                >
            </el-button-group>
        </div>
    </div>
</template>

<script>

    import {video3D, ratateDirection} from "../../utils/video/video3D";
    import pickUpPos from "../../utils/pickUpPos"

    var selectedView = null;
    var arrViewVideo = [];
    var pick = null;
    export default {
        data() {
            return {
                fov: 1,
                aspect: 1,
                cameraPosition:  [118.74804117175752, 31.919859746923716, 44.15098810007873],
                debugFrustum: true,
                alpha: 1,
                step: 0.05,
                position: [118.74778259138056, 31.919670405942576, 37.85216284779413],
                videoUrl: "http://127.0.0.1:8099/data/fz.avi"
            };
        },
        components: {},
        computed: {},
        methods: {
            change_position() {
                if (!selectedView) return;
                pick.getPos((pos) => {
                    if (!pos) return;
                    this.position = JSON.stringify(pos);
                    var cartesian = Cesium.Cartesian3.fromDegrees(pos.longitude, pos.latitude, pos.height);
                    selectedView.position = cartesian;
                });
            },
            change_cameraPosition() {
                if (!selectedView) return;
                pick.getPos((pos) => {
                    if (!pos) return;
                    this.cameraPosition = JSON.stringify(pos);
                    var cartesian = Cesium.Cartesian3.fromDegrees(pos.longitude, pos.latitude, pos.height);
                    selectedView.cameraPosition = cartesian;
                });
            },
            //微调视频
            rotateCamera(dir, val) {
                if (!selectedView) return;
                selectedView.rotateCamera(dir, val * 1);
                // viewer.camera.direction = selectedView.camera.direction;
                // viewer.camera.right = selectedView.camera.right;
                // viewer.camera.up = selectedView.camera.up;
            },
            translationTop() {
                this.rotateCamera(ratateDirection.TOP, this.step);
            },
            translationBottom() {
                this.rotateCamera(ratateDirection.BOTTOM, this.step);
            },
            translationLEFT() {
                this.rotateCamera(ratateDirection.LEFT, this.step);
            },
            translationRIGHT() {
                this.rotateCamera(ratateDirection.RIGHT, this.step);
            },
            translationALONG() {
                this.rotateCamera(ratateDirection.ALONG, this.step);
            },
            translationINVERSE() {
                this.rotateCamera(ratateDirection.INVERSE, this.step);
            },
            chkDebugFrustum() {
                if (selectedView) {
                    selectedView.debugFrustum = !this.debugFrustum;
                }
            },
            change_alpha() {
                if (selectedView) {
                    selectedView.alpha = this.alpha;
                }
            },
            change_fov() {
                if (selectedView) {
                    selectedView.fov = this.fov;
                }
            },
            change_aspect() {
                if (selectedView) {
                    selectedView.aspectRatio = this.aspect;
                }
            },
            locate() {
                if (selectedView) {
                    selectedView.locate();
                }
            },
            videoPlay() {
                if (selectedView) {
                    selectedView.videoPlay = true;
                }
            },
            videoStop() {
                if (selectedView) {
                    selectedView.videoPlay = false;
                }
            },
            //清除
            clearVideo() {
                for (var i = 0; i < arrViewVideo.length; i++) {
                    arrViewVideo[i].destroy();
                }
                arrViewVideo = [];
                selectedView = null;
            },
            //颜色投放
            createViewForColor() {
                var cartesian = Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], this.position[2]);
                var cameraPosition =Cesium.Cartesian3.fromDegrees(this.cameraPosition[0], this.cameraPosition[1], this.cameraPosition[2]);
                //构造投射体
                selectedView = new video3D(viewer, Cesium, {
                    type: "Color",
                    color: Cesium.Color.CYAN.withAlpha(0.5),
                    cameraPosition: cameraPosition,
                    position: cartesian,
                    alpha: alpha,
                    debugFrustum: debugFrustum
                });
                arrViewVideo.push(selectedView);
            },
            //图片投放
            createViewForPicture() {
                var cartesian = Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], this.position[2]);
                var cameraPosition =Cesium.Cartesian3.fromDegrees(this.cameraPosition[0], this.cameraPosition[1], this.cameraPosition[2]);
                var img = require("../../assets/smoke.png")
                //构造投射体
                selectedView = new video3D(viewer, Cesium, {
                    type: "Image",
                    url: img,
                    cameraPosition: cameraPosition,
                    position: cartesian,
                    alpha: this.alpha,
                    debugFrustum: this.debugFrustum,
                });
                arrViewVideo.push(selectedView);
            },
            createViewForVideo() {
                var cartesian = Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], this.position[2]);
                var cameraPosition =Cesium.Cartesian3.fromDegrees(this.cameraPosition[0], this.cameraPosition[1], this.cameraPosition[2]);
                //构造投射体
                selectedView = new video3D(viewer, Cesium, {
                    type: "Video",
                    url: this.videoUrl,
                    cameraPosition: cameraPosition,
                    position: cartesian,
                    alpha: this.alpha,
                    debugFrustum: this.debugFrustum,
                });
                arrViewVideo.push(selectedView);
            },
            createText() {
                var cartesian = Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], this.position[2]);
                var cameraPosition =Cesium.Cartesian3.fromDegrees(this.cameraPosition[0], this.cameraPosition[1], this.cameraPosition[2]);

                //构造投射体
                selectedView = new video3D(viewer, Cesium, {
                    type: "Text",
                    text: "在线视频检测系统",
                    cameraPosition: cameraPosition,
                    position: cartesian,
                    alpha: this.alpha,
                    debugFrustum: this.debugFrustum,
                    textStyles: {
                        font: '50px 楷体',
                        fill: true,
                        fillColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
                        stroke: true,
                        strokeWidth: 2,
                        strokeColor: new Cesium.Color(1.0, 1.0, 1.0, 0.8),
                        backgroundColor: new Cesium.Color(1.0, 1.0, 1.0, 0.1),
                        textBaseline: 'top',
                        padding: 40,
                    }
                });
                arrViewVideo.push(selectedView);
            },
            //加载已配置好的视频
            addHistoryVideo() {
                var cartesian = Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], this.position[2]);
                var cameraPosition =Cesium.Cartesian3.fromDegrees(this.cameraPosition[0], this.cameraPosition[1], this.cameraPosition[2]);
                var params = {
                    "type": "Video",
                    "url": this.videoUrl,
                    "position": cartesian,
                    "cameraPosition": cameraPosition,
                    "fov": this.fov,
                    "aspectRatio": this.aspect,
                    "alpha": this.alpha,
                    "debugFrustum": this.debugFrustum,
                    "dirObj": {
                        "direction": {"x": 0.07331987934745406, "y": -0.31686588753316797, "z": -0.9456321719412325},
                        "right": {"x": 0.8826585211077188, "y": 0.46201009007723565, "z": -0.08637483304041443},
                        "up": {"x": -0.4642608430704491, "y": 0.8283373020603265, "z": -0.3135588997412374}
                    }
                };
                selectedView = new video3D(viewer, Cesium, params);
                arrViewVideo.push(selectedView);
            }
        },
        mounted() {
            //不加无法投射到地形上
            pick = new pickUpPos(viewer, Cesium);
            viewer.scene.globe.depthTestAgainstTerrain = true;
            this.addHistoryVideo();
        },
        destroyed() {
            pick.clear();
        }
    };
</script>

<style lang="scss">
    .flexRow {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 4px 0;
    }

    .rowLabel {
        color: #fff;
    }
</style>
